<script setup>
import { ref } from "vue";
const active = ref(0);
const left = ref(false);

</script>
<template>
  <var-space direction="column" :size="[10, 0]">
    <var-app-bar title="电冰箱测试系统">
      <template #left>
        <var-icon
          name="menu"
          type="primary"
          block
          @click="left = true"
          size="40px"
          color="#ff0000"
        />
      </template>
    </var-app-bar>
  </var-space>

  <var-popup position="left" v-model:show="left">
    <div class="popup-example-block">
      <var-tabs
        class="tabs-example-vertical"
        layout-direction="vertical"
        color="var(--color-primary)"
        active-color="#fff"
        inactive-color="hsla(0, 0%, 100%, .6)"
        v-model:active="active"
      >
        <var-tab>测试控制</var-tab>
        <var-tab>传感器配置</var-tab>
        <var-tab @click="change('/alldatalist')">全部数据</var-tab>
        <var-tab @click="change('/iodatalist')">开停点数据</var-tab>
        <var-tab>EXCEL导出</var-tab>
        <var-tab>曲线显示</var-tab>
        <var-tab>帮助</var-tab>
      </var-tabs>
    </div>
  </var-popup>
</template>
<script>
export default {
  methods:{
    change(url){
      this.$router.push(url)
    }
  }
}


</script>

<style>
.tabs-example-vertical {
  width: 250px !important;
  height: 400px !important;
}

.popup-example-block {
  padding: 0px 0px;
  width: 250px;
}
</style>
